<template>
	<view class="home-template4">
		<view class="title">{{title}}</view>
		<view class="list">
			<view class="list-item" v-for="i in 3" :key="i">
				<image class="image" src="http://172.16.0.105:9990/8be3ff8e7a133d166f3834de16116b10.jpeg" mode="aspectFill"></image>
				<view class="list-item-box">
					<view class="name">总台文创央视CCTV 2023兔年生肖加油兔手串</view>
					<view class="tips">
						<view class="price">
							<text style="font-size: 24rpx;">￥</text>
							<text style="font-size: 34rpx;">880</text>
						</view>
						<text class="numb" style="line-height: 44rpx;">13人付款</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			title: {
				type: String,
				default: () => '精品文创推荐'
			}
		},
		name: "HomeTemplate4",
		data() {
			return {}
		},
		methods: {
			init(){}
		}
	}
</script>

<style lang="scss" scoped>
	.home-template4 {
		.title {
			color:  rgba(0, 0, 0, 0.9);
			font-size: 30rpx;
			margin-bottom: 16rpx;
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 100rpx;
			.list-item {
				max-width: calc(50% - 16rpx);
				margin-bottom: 32rpx;
				background-color: #FFFFFF;
				border-radius: 12rpx;
				overflow: hidden;
				.image{
					height: 320rpx;
					width: 100%;
					display: block;
				}
				&:nth-of-type(2n){
					margin-left: 32rpx;
				}
				.list-item-box {
					padding: 0 14rpx 12rpx 14rpx;
					height: 148rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						display: -webkit-box;
						overflow: hidden;
						white-space: normal !important;
						text-overflow: ellipsis;
						word-wrap: break-word;
						word-break: break-all;
						-webkit-line-clamp: 2;  //行数
						-webkit-box-orient: vertical;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 1);
						margin: 8rpx 0;
					}
					.tips {
						display: flex;
						justify-content: space-between;
						align-content: center;
						
						.price {
							color: rgba(255, 152, 0, 1);
							display: flex;
							align-items: flex-end;
						}

						.numb {
							color: rgba(0, 0, 0, 0.45);
							font-size: 24rpx;
						}
					}

				}
			}
		}
	}
</style>
